记一种echarts绘制不均匀刻度的方法 | 您所在的位置:网站首页 › echarts y轴固定刻度 › 记一种echarts绘制不均匀刻度的方法 |
首先介绍下背景:最近,接到一个任务,将数据可视化展示出来。项目是基于Vue的,开搞呗,安装echarts库。。。 按照官方的说明文档,开始实现,效果如下: 看着好像也没啥问题。 想多了,从上图中,还不能看出数据大小的明显差异,但到了测试环境,由于数据的差异过大,有的是个数级别的,有的是百万级别的,结果就导致了那些个数据较小的柱子基本看不出来,高度太低(因为echarts是根据数据的大小分配高度的)。没办法,查了一圈官方文档也没啥眉目,就百度了下,看到了 “数据映射”关键词,开始动手实现 第一步:先将y轴等分成几份(这里是5等分),然后设置最小值(这里设置成0),由于数据是接口返回的,这里最大值不设置,由库自己定,然后自定义y轴的刻度标签显示: yAxis: { type: 'value', min: 0, splitLine: { show: false }, interval: this.interval, axisLabel: { formatter: (v, ix) => { if (this.max this.boundary) { drt = rt.map(el => { return el.map((elv, elix) => { if (elix == 0) { return elv } else if (elv >= this.ylabel[0] && elv this.ylabel[1] && elv this.ylabel[2] && elv this.ylabel[3] && elv { if (this.max |
CopyRight 2018-2019 实验室设备网 版权所有 |